body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    background: #212121;
    color: #fff;
}

a {
	color: #a8a7a8;
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
}

#footer {
	position: absolute;
	bottom: 10px;
	right: 10px;
	align-self: flex-end;
}

#loading {
	font-weight: bold;
}

.loaded #loading {
	display: none;
}

#content {
	display: none;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loaded #content {
	display: flex;
}

#content-text {
	max-width: 70%;
}

.button {
	color: #fff;
	font-size: 0;
	padding: 15px;
	background: #512DA8;
	border-radius: 10px;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
}

.button:hover, .button:active {
	background: #5E35B1;
	box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);
	text-decoration: none;
}

#bookmarklet-button::before {
	content: "Drag me to your bookmark bar!";
	font-size: 1rem;
}
